<template>
  <div class="Home-Cart">
    <nav-bar
      title="购物车"
      left-text=""
      :right-text="txt"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
    </nav-bar>

    <!-- 购物车列表 -->
    <div class="Cart-List">
      <div class="CatrList" v-for="i in carts">
        <swipe-cell v-for="i in carts">
          <card
            :price="i.totalPrcie"
            :title="i.name"
            class="goods-card"
            :thumb="dalImg(i.image)"
          >
            <template #tag>
              <Checkbox v-model="i.chk"></Checkbox>
            </template>
          </card>
          <template #right>
            <Button
              square
              text="删除"
              @click="delFromCart(i.id)"
              type="danger"
              class="delete-button"
            />
          </template>
        </swipe-cell>

        <!-- <p
          style="
            font-size: 0.85rem;
            padding: 0.2rem 0.5rem;
            border-bottom: 0.0625rem solid rgb(228, 225, 225);
          "
        >
          {{i.name}}
        </p>
        <checkbox v-model="i.chk"></checkbox>
        <card
          :price="i.totalPrcie"
          :title="i.name"
          :thumb="dalImg(i.image)"
        /> -->
      </div>
    </div>
    <!-- 底部 -->
    <div class="Cart-bottom">
      <div style="padding: 1.2vh 0">
        <checkbox v-model="chkAll">全选</checkbox>
      </div>
      <div style="display: flex">
        <span style="color: #999; margin-right: 0.5rem"
          >合计：<i style="font-size: 0.75rem; color: orange">{{
            sumPrice
          }}</i></span
        >
        <!--         <span class="Cartbtn" v-show="show" @click="delButton()">删除</span> -->
        <router-link :to="{ name: 'Home-Orders' }"
          ><div class="Cartbtn" style="background-color: #1989fa">
            去结算
          </div></router-link
        >
      </div>
    </div>
  </div>
</template>
<script setup>
import { NavBar, Card, Checkbox, Toast, Button, SwipeCell } from "vant";
import { ref, computed } from "vue";
import { delCartAPI, loadCartAPI } from "../API/wang";
import { dalImg, getToken } from "../utils/tools";
import { useRouter, useRoute } from "vue-router";
const route = useRoute();
const router = useRouter();
/* 编辑 */
/* const Edit = ref(1);
const txt = ref("编辑");
const show = ref(false);
const onClickRight = () => {
  Edit.value++;
  if (Edit.value % 2 == 0) {
    show.value = true;
    txt.value = "取消编辑";
  } else {
    show.value = false;
    txt.value = "编辑";
  }
}; */
//获取购物车数据
const carts = ref([]);
// const loadCarts = async () => {
//   const data = await loadCartAPI(route.query.id);
//   console.log(data);
//   carts.value = data.data;
//   console.log(carts.value);
// };
const loadCarts = async (uid) => {
  await loadCartAPI(uid).then((res) => {
    console.log(res);
    carts.value = res.data;
  }); // 初始化的时候获取数据
};
loadCarts();
//全选
const chkAll = computed({
  set(v) {
    carts.value.forEach((item) => (item.chk = v));
  },
  get() {
    return carts.value.every((item) => item.chk);
  },
});

const sumPrice = computed(() => {
  return carts.value
    .filter((item) => item.chk) //获取选中的
    .reduce((pre, cur) => cur.totalPrcie, 0);
});

//删除
const delFromCart = async (id) => {
  await delCartAPI(id);
  Toast.success("删除成功");
  loadDataFromServer(); //重新加载数据
};

//返回上一级
const onClickLeft = () => {
  const loadCarts = async (uid) => {
    await loadCartAPI(uid).then((res) => {
      console.log(res);
      carts.value = res.data;
      if (res.data[0] == undefined) {
        router.push({
          name: "Home",
        });
      } else {
        history.back();
      }
    }); // 初始化的时候获取数据
  };
  loadCarts();
};
</script>
<style scoped>
.aaa {
  position: fixed;
  top: 1.6%;
  right: 12px;
  z-index: 2;
  font-size: 15px;
}
.bbb {
  position: fixed;
  top: 1.6%;
  right: 12px;
  font-size: 15px;
  z-index: 2;
}
.cart {
  width: 100%;
  height: 15vh;
  padding: 10px 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.cart .van-checkbox {
  float: left;
}
.cart .IMG {
  width: 35%;
  height: 100%;
  border: 1px solid #cecece;
  float: left;
  margin-left: 10px;
}
.txt {
  width: 100px;
  height: 80px;
  float: left;
}
.txt p {
  font-size: 0.7rem;
  color: gray;
  line-height: 3vh;
}
.txt .pp {
  font-size: 0.8rem;
  color: rgb(251, 168, 59);
  line-height: 1.6vh;
}
.txt .pp span {
  font-size: 0.7rem;
  color: gray;
  display: inline-block;
  margin-left: 0.6667vw;
  margin-top: 4.4978vh;
  text-decoration: line-through;
}
#app {
  padding: 0;
}
.Home-Cart {
  background-color: #f7f8fa;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
/* 顶部导航 */
.Home-Cart .van-nav-bar .van-icon {
  color: #333;
}
.Home-Cart .van-nav-bar__text {
  color: #333;
  font-size: 0.75rem;
  font-weight: bolder;
}
.Home-Cart .van-nav-bar__right {
  color: #333;
  font-size: 0.75rem;
  font-weight: bolder;
}
/* 购物车列表 */
.Cart-List {
  flex: 1;
  overflow: auto;
}
.CatrList {
  background-color: white;
  margin-bottom: 0.3rem;
}
.CatrList .po {
  font-size: 0.7rem;
}
.CatrList .van-card:not(:first-child) {
  margin-top: 0;
}
.CatrList .van-card {
  background-color: white;
}
.delete-button {
  height: 100%;
}
/* 底部 */
.Cart-bottom {
  height: 6vh;
  border-top: rgb(228, 225, 225) 0.0625rem solid;
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  line-height: 6vh;
}
i {
  font-style: normal;
}
.Cartbtn {
  width: 4.5rem;
  background-color: rgba(255, 0, 0, 0.636);
  text-align: center;
  color: white;
}
.home-cart-del {
  width: 4.5rem;
  background-color: rgba(255, 0, 0, 0.636);
  text-align: center;
  color: white;
  position: fixed;
  bottom: 0;
  right: 4.5rem;
}
</style>
